<template>
  <view class="nav-bar" :class="themeClass" :style="navBarStyle">
    <view class="nav-content">
      <!-- 左侧返回按钮 -->
      <view class="nav-left" @click="goBack">
        <image class="back-icon" :src="backIconSrc" mode="scaleToFill"></image>
      </view>
      
      <!-- 中间标题 -->
      <view class="nav-center">
        <text class="nav-title">{{ title }}</text>
      </view>
      
      <!-- 右侧插槽 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script >
export default {
  name: 'NavBar',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 主题：'dark' 黑色主题，'light' 白色主题
    theme: {
      type: String,
      default: 'dark'
    },
    // 定位
    position: {
      type: String,
      default: 'relative'
    },
    // 自定义点击回调函数
    click: {
      type: Function,
      default: null
    },
  },
  data() {
    return {
      statusBarHeight: 0
    }
  },
  computed: {
    themeClass() {
      return this.theme === 'dark' ? 'nav-bar-dark' : 'nav-bar-light'
    },
    backIconSrc() {
      return this.theme === 'dark' ? '/static/images/back-black.png' : '/static/images/back-white.png'
    },
    navBarStyle() {
      return {
        paddingTop: this.statusBarHeight + 'px',
        position: this.position
      }
    }
  },
  mounted() {
    this.getStatusBarHeight()
  },
  methods: {
    getStatusBarHeight() {
      // #ifdef APP
      // 获取系统信息
      uni.getSystemInfo({
        success: (res) => {
          this.statusBarHeight = res.statusBarHeight || 0
        }
      })
      // #endif
      // #ifndef APP
      this.statusBarHeight = 0
      // #endif
    },
    goBack() {
      // 如果外部设置了click方法，优先执行外部方法
      if (this.click && typeof this.click === 'function') {
        this.click()
        return
      }
      
      // 默认返回上一页
      uni.navigateBack({
        fail: () => {
          // 如果没有上一页，则跳转到首页
          uni.switchTab({
            url: '/pages/index/home'
          })
        }
      })
    }
  }
}
</script>

<style>
.nav-bar {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
}

.nav-bar .nav-content {
  width: 100%;
  height: 88rpx;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.nav-bar .nav-content .nav-left {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar .nav-content .nav-left .back-icon {
  width: 48rpx;
  height: 48rpx;
}

.nav-bar .nav-content .nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar .nav-content .nav-center .nav-title {
  font-size: 36rpx;
  font-weight: 500;
  line-height: 52rpx;
  text-align: center;
  width: 400rpx;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
}

.nav-bar .nav-content .nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 黑色主题 */
.nav-bar-dark .nav-title {
  color: #1F1F1F;
}

/* 白色主题 */
.nav-bar-light .nav-title {
  color: #FFFFFF;
}
</style>
